<template>
    <div class="header">
        <div class="title">
            <img :src="logo.logoUrl" alt="" v-show="logo.logoUrl" />
            <div class="item two-ellipsis" :class="logo.name.length < 11 ? lineOne : lineTwo">
                {{ logo.name }}
            </div>
        </div>

        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="5">
                <i class="el-icon-guide"></i>
                帮助手册
            </el-menu-item>
      
            <el-menu-item
                class="pull-left"
                index="2"
                v-model="common"
                v-show="common.isShow"
                style="float: left"
            >
                <router-link to="/common">{{ common.name }}</router-link>
            </el-menu-item>
            <el-menu-item
                class="pull-left"
                index="1"
                v-show="isShow"
                style="float: left"
                :model="site"
            >
                <router-link to="/website">{{ site.name }}</router-link>
            </el-menu-item>
        </el-menu>
        <el-menu mode="horizontal" class="options">
            <el-submenu index="9">
                <template slot="title">
                    <div class="header-logo">
                        <el-avatar shape="circle" size="large" :src="squareUrl"></el-avatar>
                        <div class="header-role">
                            <p>{{ userInfo.realname }}</p>
                            <p style="font-size: 12px; color: #c0c4cc">{{ userRole }}</p>
                        </div>
                    </div>
                </template>
                <el-menu-item index="0" @click="logout">
                    <i class="el-icon-location-outline"></i>
                    退出系统
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { getNewToken } from '@/utils/token.js';
import config from '@/config/index.js';

export default {
    data() {
        return {
            activeIndex: '0',
            portal: config.url.portal,
            squareUrl:
                'https://wlyxvpcdn.xiaoben365.com/wlyx/xbyx/2021/wu_1f3se8so6uqunfn19dsphk15j08/photo.png', //"https://wlyxvpcdn.xiaoben365.com/wlyx/xbyx/2021/wu_1f31tub6kii14kjcpi1lj141r8/logo.png",
            data: [],
            isShow: true,
            common: {
                isShow: false,
                name: '',
            },
            site: {
                isShow: false,
                name: '',
            },
            lineOne: 'lineOne',
            lineTwo: 'lineTwo',
        };
    },
    computed: {
        ...mapState({
            userInfo: (state) => state.user.userInfo,
            userRole: (state) => state.user.userInfo.roles[0].roleName,
            permissions: (state) => state.user.permissions,
            logo: (state) => state.user.logo,
        }),
    },
    methods: {
        chageToken(code) {
            let _this = this;
            getNewToken(code).then((res) => {
                if (res) {
                    _this.$store.dispatch('getLogoAsync', res?.organizationCode);
                }
            });
        },
        logout() {
            this.$store.commit('logout');
            location.reload();
        },
    },
    mounted() {
        this.$store.dispatch('setLocalUser');
        this.$store.dispatch('getLogoAsync', this.userInfo.organizationCode);
        let perms = this.permissions.filter((x) => x.module == 1 && x.code == '1001');
        if (perms.length > 0) {
            this.common.isShow = true;
            this.common.name = perms[0].name;
        }
        let permsSite = this.permissions.filter((x) => x.module == 1 && x.code == '1002');
        if (permsSite.length > 0) {
            this.site.isShow = true;
            this.site.name = permsSite[0].name;
        }
    },
};
</script>
<style lang="scss">
$bar-height: 50px;

.lineOne {
    line-height: 36px;
}
.lineTwo {
    line-height: 18px;
}
.header {
    width: 100%;
    height: 100%;
    display: flex;
    .el-avatar--large {
        height: 24px;
        width: 24px;
        display: inline-block;
    }
    .title {
        width: 210px;
        padding: 8px;
        text-align: left;
        border-right: 2px solid #e2e5eb;
        img {
            height: 32px;
            width: 32px;
            border-radius: 4px;
            float: left;
        }
        .item {
            float: left;
            font-size: 13px;
            font-weight: 600;
            color: #303133;
            margin-right: -8px;
            max-width: 150px;
            padding-left: 4px;
        }
    }
    .header-logo {
        background: #ffffff;
        color: #303133;
        text-align: left;
        padding-left: 16px;
        margin-right: 70px;
        width: 60px;
        .header-role {
            position: absolute;
            display: inline-block;
            top: -8px;
            padding: 0px 10px;
        }
        p {
            height: 16px;
        }
    }
    .el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
        position: absolute;
    }
    .el-menu--horizontal > .el-menu-item {
        height: $bar-height;
        line-height: $bar-height;
        color: #303133;
        float: right;
    }
    .el-menu--horizontal > .el-submenu {
        float: right;
    }
    .el-menu--horizontal > .el-submenu .el-submenu__title {
        line-height: $bar-height;
        color: #303133;
        height: 44px;
    }

    .el-submenu__title {
        padding-left: 0px;
    }
    .options {
        margin-left: -10px;
        margin-right: 30px;
    }

    .el-menu--horizontal > .el-menu-item.is-active {
        border-bottom: 2px solid #17c289;
        color: #17c289;
    }
    .el-menu {
        background-color: #fff;
    }
    .el-menu.el-menu--horizontal {
        border: none;
    }
}
.cus {
    font-size: 12px;
}
.cusItem {
    font-size: 14px;
    font-weight: 600;
    color: #303133 !important;
}

.el-menu-demo {
    flex: 1;
}
</style>
